<template>
  <div class="home">
    <!-- 一级页面 -->
    <router-view></router-view>
    <!-- 底部导航栏 -->
    <van-tabbar v-model="active">
      <van-tabbar-item to="/" icon="home">首页</van-tabbar-item>
      <van-tabbar-item to="/boss" icon="shop">董事中心</van-tabbar-item>
      <van-tabbar-item to="/business" icon="points-mall"
        >联创中心</van-tabbar-item
      >
      <van-tabbar-item to="/user_center" icon="contact"
        >会员中心</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
// @ is an alias to /src
// import Config from "@/config";
// import Util from "@/lib/util.js";
import { Tabbar, TabbarItem } from "vant";
// import { mapState, mapGetters, mapMutations } from "vuex";
// const util = new Util();
// const ossUrl = Config.ossUrl;

export default {
  name: "page",
  data() {
    return {
      active: 0
    };
  },
  watch: {
    $route(to) {
      const path = to.path;
      this.changeIndex(path);
    }
  },
  mounted() {
    this.changeIndex(this.$route.path);
  },
  components: {
    "van-tabbar": Tabbar,
    "van-tabbar-item": TabbarItem
  },
  methods: {
    changeIndex(path) {
      let navActiveIndex = 0;
      switch (path) {
        case "/boss":
          navActiveIndex = 1;
          break;
        case "/business":
          navActiveIndex = 2;
          break;
        case "/user_center":
          navActiveIndex = 3;
          break;
        default:
          navActiveIndex = 0;
          break;
      }
      this.active = navActiveIndex;
    }
  }
};
</script>
<style lang="scss">
@import "@/assets/css/m-page.scss";
</style>
